import React from "react";
import { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";
import { Sidebar, Toast } from "react-vant";
import axios from "axios";
axios.defaults.baseURL = "http://localhost:3000";
export default function List() {
  let [a, b] = useSearchParams();
  let id = a.get("id");
  const [active, setActive] = useState(0);
  const [list, setList] = useState([]);
  const [showList, setShowList] = useState([]);

  const [cate, setCate] = useState([]);
  useEffect(() => {
    getcate();
    getlist();
  }, []);
  //获取分类列表
  let getcate = async () => {
    let {
      data: { code, data },
    } = await axios.get("/list");
    if (code === 200) {
      setCate(data);
    }
  };
  //获取分类下的商品列表2
  let getlist = async () => {
    let {
      data: { code, data },
    } = await axios.get("/list1");
    if (code === 200) {
      setList(data);
      setShowList([...list].filter((t) => t.cid == 1));
    }
  };
  //点击分类找对应菜品
  let aa = (id) => {
    console.log(id, list);
    let bb = [...list].filter((item) => item.cid === id);
    console.log(bb, "jjj");
    // setList(bb);
    setShowList(bb);
  };
  return (
    <div>
      <Sidebar
        value={active}
        onChange={(v) => {
          setActive(v);
          Toast.info(`内容区 ${v + 1}`);
        }}
      >
        {cate.map((item) => (
          <Sidebar.Item
            contentStyle={{ backgroundColor: "#fff", padding: "18px 10px" }}
            title={item.name}
            onClick={() => {
              aa(item.cid);
            }}
          >
            {showList.map((item) => (
              <div key={item._id}>{item.name}</div>
            ))}
          </Sidebar.Item>
        ))}

        {/* <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="内容2">
        我是内容区2
      </Sidebar.Item>
      <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="内容3">
        我是内容区3
      </Sidebar.Item> */}
      </Sidebar>
    </div>
  );
}
